<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <!-- Bootstrap 3.3.4 -->
    <link href="/public/admin/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="/public/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/public/admin/css/animate.css" rel="stylesheet">
    <link href="/public/admin/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/public/admin/css/style.css?v=4.0.0" rel="stylesheet">
    <link href="/public/admin/css/ratuo.css" rel="stylesheet">

    <script src="/public/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="/public/admin/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="/public/admin/js/common.js"></script>
    <script src="/public/admin/js/plugins/layer/layer.min.js"></script>
    <script src="/public/admin/js/myAjax.js"></script>
    <script src="/public/admin/js/jquery.validate.js"></script>

    <link href="/public/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <script src="/public/admin/js/plugins/iCheck/icheck.min.js"></script>

    <script src="/public/admin/js/article.js"></script>
    <script src="/public/admin/js/echart.min.js"></script>
    <style>
        .main{
            width: 100%;height:500px;display:inline-block;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>图表("{$box}")</h5>
                </div>

                <div class="ibox-content">
                    <div class="col-sm-2" style="float:right;">
                        <span class="input-group-btn"> <button type="button" class="btn btn-primary" id="start">开始</button> </span>
                        <span class="input-group-btn"> <button type="button" class="btn btn-primary" id="stop">暂停</button> </span>
                    </div>
                    <div class="col-sm-2" style="float:right;">
                        <div class="input-group">
                            <input type="text" class="form-control" name="limit" value="100"> <span class="input-group-btn"> <button type="button" class="btn btn-primary" onclick="getLimit()">确定</button> </span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box">
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="main1" class="main"></div>
                                <div id="main2" class="main"></div>
                                <div id="main3" class="main"></div>

                                <script type="text/javascript">
                                    var myChart1 = echarts.init(document.getElementById('main1'));
                                    var myChart2 = echarts.init(document.getElementById('main2'));
                                    var myChart3 = echarts.init(document.getElementById('main3'));
                                    var time;
                                    var limit = 100;
                                    var box = "{$box}";
                                    getData('C',limit,myChart1);
                                    getData('V',limit,myChart2);
                                    getData('P',limit,myChart3);
                                    function getData(type,limit,chat){
                                        $.ajax({
                                            url : "{:url('Chart/index')}",
                                            type : "post",
                                            data : {type:type,limit:limit,box:box},
                                            dataType : "json",
                                            success:function(res){
                                                // 基于准备好的dom，初始化echarts实例
                                                // 指定图表的配置项和数据
                                                var text ='';
                                                var Ya={};
                                                if (type == 'C'){
                                                    text = '电流(mA)';
                                                    Ya={
                                                        min:0,
                                                        max:5000
                                                    }
                                                }
                                                if (type == 'V'){
                                                    text = '电压(V)';
                                                    Ya={
                                                        min:0,
                                                        max:20
                                                    }
                                                }
                                                if (type == 'P'){
                                                    text = '功率(W)';
                                                    Ya={
                                                        min:0,
                                                        max:50
                                                    }
                                                }
                                                var option1 = {
                                                    title: {
                                                        text: text
                                                    },
                                                    tooltip: {},
                                                    legend: {
                                                        data:[text]
                                                    },
                                                    xAxis: {
                                                        data: res.createtime
                                                    },
                                                    yAxis:Ya,
                                                    series: [{
                                                        name: text,
                                                        type: 'line',
                                                        data: res.arr
                                                    },]
                                                };
                                                // 使用刚指定的配置项和数据显示图表。
                                                chat.setOption(option1);
                                            }
                                        });

                                    }
                                    function  getLimit() {
                                        limit = $('input[name="limit"]').val();
                                        top.layer.msg('正在获取...',{time:2000},function(){
                                        });
                                    }
                                    function autoPlay(){
                                        time = setInterval(function(){
                                            getData('C',limit,myChart1);
                                            getData('V',limit,myChart2);
                                            getData('P',limit,myChart3);
                                        },5000);
                                    }
                                    autoPlay();　　//调用函数

                                    $("#start").click(function(){
                                        autoPlay();
                                        top.layer.msg('已开始',{time:1000},function(){
                                        });
                                    });

                                    $("#stop").click(function(){
                                        clearInterval(time),function(){
                                            autoPlay();
                                        }
                                        top.layer.msg('已暂停',{time:1000},function(){
                                        });
                                    })

                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input id="handle_status" value="" hidden="hidden">
<input id="kind_id" value="0" hidden="hidden">

</body>

</html>
